import React, { useEffect, useState } from 'react'
import axios from 'axios'

import { Table, Button, Modal } from 'antd';
export default function Users() {
  let [PerformData, setPerformData] = useState([])
  //  添加对话框的显示隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  //标题的表头
  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
          <Button onClick={() => handleEdit(record)}>编辑</Button>
          <Button onClick={() => handleDelete(record)}>删除</Button>
        </span>
      ),
    },
  ];

  //初始化获取演出数据

  useEffect(() => {
    axios.get('http://localhost:3000/getusers').then(response => {
      setPerformData(response.data)
    })
      .catch(error => {
        console.log(error);
      });
  }, [])
  let data = PerformData.data

  console.log(PerformData.data, '111');
  const handleEdit = (record) => {
    // 处理编辑操作
    console.log(record, 'record');
  };

  const handleDelete = (record) => {
    // 处理删除操作
    console.log(record, 'delrecord');
  };

  //分页


  const pagination = {
    pageSize: 10, // 每页显示的条数
    total: PerformData.length, // 数据总数
    showSizeChanger: true, // 是否可以改变每页显示条数
    showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`, // 自定义显示总条数的文本
  };

  return (
    <div>
      <Table columns={columns} dataSource={data} pagination={pagination} />
      <Button type="primary" onClick={showModal}>
        添加用户
      </Button>
      <Modal title="添加用户" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>

      </Modal>
    </div>
  )
}
